Vue 3 Development with the PrimeVue Framework — Month Picker and Cascade Select

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Month Picker

We can add a month picker by writing:

<template>
  <div>
    <Calendar
      v-model="value"
      view="month"
      dateFormat="mm/yy"
      yearNavigator
      yearRange="2000:2025"
    />

<p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: null,
    };
  },
  methods: {},
};
</script>

<style scoped>
.special-day {
  font-style: italic;
}
</style>

We add the yearNavigator prop to let us add a dropdown to let us select the year.

yearRange sets the years we can select.

dateFormat formats the date to be displayed in the input.

view sets the view mode for the date picker.

The touchUI prop lets us enable the date picker to function with touch:

<template>
  <div>
    <Calendar v-model="value" touchUI />
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: null,
    };
  },
  methods: {},
};
</script>

<style scoped>
.special-day {
  font-style: italic;
}
</style>

Cascade Select

We can use the CascadeSelect component to display a nested structure of options.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import CascadeSelect from 'primevue/cascadeselect';
import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeicons/primeicons.css'

const app = createApp(App);
app.use(PrimeVue);
app.component("CascadeSelect", CascadeSelect);
app.mount("#app");

App.vue

<template>
  <div>
    <CascadeSelect
      v-model="selectedCity"
      :options="countries"
      optionLabel="cname"
      optionGroupLabel="name"
      :optionGroupChildren="['states', 'cities']"
      style="minwidth: 14rem"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: null,
      countries: [
        {
          name: "Canada",
          code: "CA",
          states: [
            {
              name: "Quebec",
              cities: [
                { cname: "Montreal", code: "C-MO" },
                { cname: "Quebec City", code: "C-QU" },
              ],
            },
            {
              name: "Ontario",
              cities: [
                { cname: "Ottawa", code: "C-OT" },
                { cname: "Toronto", code: "C-TO" },
              ],
            },
          ],
        },
        {
          name: "United States",
          code: "US",
          states: [
            {
              name: "California",
              cities: [
                { cname: "Los Angeles", code: "US-LA" },
                { cname: "San Francisco", code: "US-SF" },
              ],
            },
            {
              name: "Florida",
              cities: [
                { cname: "Jacksonville", code: "US-JA" },
                { cname: "Miami", code: "US-MI" },
              ],
            },
            {
              name: "Texas",
              cities: [
                { cname: "Austin", code: "US-AU" },
                { cname: "Dallas", code: "US-DA" },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>

We set the options prop to countries , which is an array of objects.

optionLabel has the property name for the option labels.

optionGroupLabel has the property name for the dropdown labels.

We can customize how the options are displayed with the option slot:

<template>
  <div>
    <CascadeSelect
      v-model="selectedCity"
      :options="countries"
      optionLabel="cname"
      optionGroupLabel="name"
      :optionGroupChildren="['states', 'cities']"
      style="minwidth: 14rem"
    >
      <template #option="slotProps">
        <div>
          <i class="pi pi-compass p-mr-3" v-if="slotProps.option.cities"></i>
          <i class="pi pi-map-marker p-mr-3" v-if="slotProps.option.cname"></i>
          <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
        </div>
      </template>
    </CascadeSelect>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: null,
      countries: [
        {
          name: "Canada",
          code: "CA",
          states: [
            {
              name: "Quebec",
              cities: [
                { cname: "Montreal", code: "C-MO" },
                { cname: "Quebec City", code: "C-QU" },
              ],
            },
            {
              name: "Ontario",
              cities: [
                { cname: "Ottawa", code: "C-OT" },
                { cname: "Toronto", code: "C-TO" },
              ],
            },
          ],
        },
        {
          name: "United States",
          code: "US",
          states: [
            {
              name: "California",
              cities: [
                { cname: "Los Angeles", code: "US-LA" },
                { cname: "San Francisco", code: "US-SF" },
              ],
            },
            {
              name: "Florida",
              cities: [
                { cname: "Jacksonville", code: "US-JA" },
                { cname: "Miami", code: "US-MI" },
              ],
            },
            {
              name: "Texas",
              cities: [
                { cname: "Austin", code: "US-AU" },
                { cname: "Dallas", code: "US-DA" },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>

slotProps.option has the option object.

Conclusion

We can add dropdowns that work with nested entries with the cascade select component into our Vue 3 app.

Also, we can add a month picker into our Vue 3 app with PrimeVue.